@import 'uview-ui/theme.scss';
/* 页面左右间距 */
$page-row-spacing: 30upx;
$page-color-base: #f8f8f8;
$page-color-light: #f8f6fc;
$base-color: #588FF0;

/* 文字尺寸 */
$font-sm: 24upx;
$font-base: 28upx;
$font-lg: 32upx;
/*文字颜色*/
$font-color-dark: #303133;
$font-color-base: #606266;
$font-color-light: #909399;
$font-color-disabled: #C0C4CC;
$font-color-spec: #4399fc;
/* 边框颜色 */
$border-color-dark: #DCDFE6;
$border-color-base: #E4E7ED;
$border-color-light: #EBEEF5;
/* 图片加载中颜色 */
$image-bg-color: #eee;
/* 行为相关颜色 */
$uni-color-primary:#fa436a;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;

$IMG_URL: 'https://mmchengren.com/ctimg/'; //css中背景图片变量。js图片变量在env.js
@mixin bgGc($direction: top, $gra: white, $grat: white) {
	background: -webkit-linear-gradient($direction, $gra, $grat);
	/* Safari 5.1 - 6.0 */
	background: -o-linear-gradient($direction, $gra, $grat);
	/* Opera 11.1 - 12.0 */
	background: -moz-linear-gradient($direction, $gra, $grat);
	/* Firefox 3.6 - 15 */
	background: linear-gradient($direction, $gra, $grat);
	/* 标准的语法（必须放在最后） */
}

/* -----------------------------------------文本------------------------------------------- */

//强制文字换行
.text_break {
	word-wrap: break-word;
}

@mixin ell() {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@mixin ell($num: 2) {
	display: -webkit-box;
	-webkit-line-clamp: $num;
	overflow: hidden;
	/*! autoprefixer  :off */
	-webkit-box-orient: vertical;
	/*! autoprefixer  :on */
}

.texcent {
	text-align: center;
}

.textl {
	text-align: left;
}

.textr {
	text-align: right;
}

.break {
	word-wrap: break-word;
	word-break: normal;
}

/* 阻止移动端长按选中 */
.txt {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* 首行缩进2字符 */
.indent {
	text-indent: 2em;
}

//文字竖排版
.tv {
	writing-mode: vertical-lr;
	-webkit-writing-mode: vertical-lr;
	-ms-writing-mode: vertical-lr;
}

/* -----------------------------------------文本end------------------------------------------------ */
/* -------------------------------------------定位---------------------------------------------- */

.abs {
	position: absolute;
}

.fix {
	position: fixed;
}

.rel {
	position: relative;
}

.floatl {
	float: left;
}

.floatr {
	float: right;
}

.clearfloat:after {
	display: block;
	clear: both;
	content: '';
	visibility: hidden;
	height: 0;
}

.clearfloat {
	zoom: 1;
}

.clearfixed:after {
	clear: both;
	content: '.';
	display: block;
	height: 0;
	line-height: 0;
	visibility: hidden;
	zoom: 1;
}

.clearfixed > .li {
	display: block;
	float: left;
}
/* -------------------------------------------定位---------------------------------------------- */
/* ---------------------------------------其他----------------------------------------------- */

//亮度
@mixin light($per: 100%) {
	-webkit-filter: brightness($per);
	filter: brightness($per);
}

//去色
@mixin gc($per: 0) {
	-webkit-filter: grayscale($per);
	filter: grayscale($per);
}

.w100 {
	width: 100%;
}

.h100 {
	height: 100%;
}

.wh100 {
	width: 100%;
	height: 100%;
}

.shadow {
	box-shadow: 0 0 3px rgba($color: #000000, $alpha: 0.13);
}

/* --------------------------------------其他end---------------------------------------------- */
/* --------------------------------------动画---------------------------------------------- */

/* 放大动画 */
.big {
	animation: amplify_ 0.5s;
	-webkit-animation: amplify_ 0.5s;
}

@keyframes amplify_ {
	0% {
		transform: scale(0);
		-webkit-transform: scale(0);
	}

	100% {
		transform: scale(1);
		-webkit-transform: scale(1);
	}
}

@-webkit-keyframes amplify_ {
	0% {
		transform: scale(0);
		-webkit-transform: scale(0);
	}

	100% {
		transform: scale(1);
		-webkit-transform: scale(1);
	}
}

/* 缩小动画 */
.small {
	animation: narrow_ 0.5s;
	-webkit-animation: narrow_ 0.5s;
}

@keyframes narrow_ {
	0% {
		transform: scale(1);
		-webkit-transform: scale(1);
	}

	100% {
		transform: scale(0);
		-webkit-transform: scale(0);
	}
}

@-webkit-keyframes narrow_ {
	0% {
		transform: scale(1);
		-webkit-transform: scale(1);
	}

	100% {
		transform: scale(0);
		-webkit-transform: scale(0);
	}
}

/* 旋转动画 */
.ar {
	animation: whirling_ 0.8s linear infinite;
	-webkit-animation: whirling_ 0.8s linear infinite;
}

@keyframes whirling_ {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	25% {
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}

	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}

	75% {
		-webkit-transform: rotate(270deg);
		transform: rotate(270deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@-webkit-keyframes whirling_ {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	25% {
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}

	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}

	75% {
		-webkit-transform: rotate(270deg);
		transform: rotate(270deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

// 过渡效果
.trans {
	transition-property: all;
	-moz-transition-property: all;
	-o-transition-property: all;
	-webkit-transition-property: all;
	transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	transition-timing-function: ease;
	-moz-transition-timing-function: ease;
	-o-transition-timing-function: ease;
	-webkit-transition-timing-function: ease;
}
.trans_q {
	transition-property: all;
	-moz-transition-property: all;
	-o-transition-property: all;
	-webkit-transition-property: all;
	transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-webkit-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-timing-function: ease;
	-moz-transition-timing-function: ease;
	-o-transition-timing-function: ease;
	-webkit-transition-timing-function: ease;
}

/* ---------------------------------------flex------------------------------------------- */
.flex-one {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	flex: 1;
}

@mixin flex($wrap: 'n', $justify: 'l', $align: 'c', $direction: 'r') {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	/* flex-wrap 换行 */
	@if $wrap== 'n' {
		// 不换行
		flex-wrap: nowrap;
		-webkit-flex-wrap: nowrap;
	} @else if $wrap == 'w' {
		// 换行，第一行在上方
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
	} @else if $wrap == 'wr' {
		// 换行，第一行在下方
		flex-wrap: wrap-reverse;
		-webkit-flex-wrap: wrap-reverse;
	}

	/* 主轴上的对齐方式 */
	@if $justify== 'l' {
		// 左对齐
		-webkit-box-pack: start;
		-webkit-justify-content: flex-start;
		-moz-justify-content: flex-start;
		justify-content: flex-start;
	} @else if $justify == 'r' {
		// 右对齐
		-webkit-box-pack: end;
		-webkit-justify-content: flex-end;
		-moz-justify-content: flex-end;
		justify-content: flex-end;
	} @else if $justify == 'c' {
		// 居中
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-moz-justify-content: center;
		justify-content: center;
	} @else if $justify == 'cb' {
		// 两端对齐，项目之间的间隔都相等
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-moz-justify-content: space-between;
		justify-content: space-between;
	} @else if $justify == 'ca' {
		// 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
		-webkit-justify-content: space-around;
		-moz-justify-content: space-around;
		justify-content: space-around;
	}

	/* 在交叉轴上如何对齐 */
	@if $align== 'c' {
		// 交叉轴的中点对齐
		-webkit-box-align: center;
		-moz-align-items: center;
		-webkit-align-items: center;
		align-items: center;
	} @else if $align == 't' {
		// 交叉轴的起点对齐
		-webkit-box-align: flex-start;
		-moz-align-items: flex-start;
		-webkit-align-items: flex-start;
		align-items: flex-start;
	} @else if $align == 'b' {
		// 交叉轴的终点对齐
		-webkit-box-align: flex-end;
		-moz-align-items: flex-end;
		-webkit-align-items: flex-end;
		align-items: flex-end;
	} @else if $align == 's' {
		// 如果项目未设置高度或设为auto，将占满整个容器的高度
		-webkit-box-align: stretch;
		-moz-align-items: stretch;
		-webkit-align-items: stretch;
		align-items: stretch;
	} @else if $align == 'bl' {
		// 项目的第一行文字的基线对齐
		-webkit-box-align: baseline;
		-moz-align-items: baseline;
		-webkit-align-items: baseline;
		align-items: baseline;
	}

	/* 属性决定主轴的方向 */
	@if $direction== 'r' {
		// 主轴为水平方向，起点在左端
		-moz-flex-direction: row;
		-webkit-flex-direction: row;
		flex-direction: row;
	} @else if $direction == 'rr' {
		// 主轴为水平方向，起点在右端
		-moz-flex-direction: row-reverse;
		-webkit-flex-direction: row-reverse;
		flex-direction: row-reverse;
	} @else if $direction == 'c' {
		// 主轴为垂直方向，起点在上沿
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		flex-direction: column;
	} @else if $direction == 'cr' {
		// 主轴为垂直方向，起点在下沿
		-moz-flex-direction: column-reverse;
		-webkit-flex-direction: column-reverse;
		flex-direction: column-reverse;
	}
}
/* ---------------------------------------flex end------------------------------------------- */

/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */

/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */

/* 颜色变量 */

/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;

/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;

/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色

/* 边框颜色 */
$uni-border-color:#c8c7cc;

/* 尺寸变量 */

/* 文字尺寸 */
$uni-font-size-sm:12px;
$uni-font-size-base:14px;
$uni-font-size-lg:16;

/* 图片尺寸 */
$uni-img-size-sm:20px;
$uni-img-size-base:26px;
$uni-img-size-lg:40px;

/* Border Radius */
$uni-border-radius-sm: 2px;
$uni-border-radius-base: 3px;
$uni-border-radius-lg: 6px;
$uni-border-radius-circle: 50%;

/* 水平间距 */
$uni-spacing-row-sm: 5px;
$uni-spacing-row-base: 10px;
$uni-spacing-row-lg: 15px;

/* 垂直间距 */
$uni-spacing-col-sm: 4px;
$uni-spacing-col-base: 8px;
$uni-spacing-col-lg: 12px;

/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度

/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:20px;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:26px;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:15px;
